<template>
  <div class="popBoX">
    <!-- 头部仿mac -->
    <div class="header">
        <span>后台管理</span>
        <!-- 关闭 -->
        <div @click="closes" class="close"></div>
    </div>
    <!-- 正文  -->
    <div class="content">
        <span>请输入后台管理账户与密码</span><br><br>
        <input type="text" v-model="account" placeholder="请输入RootAccount"><br><br>
        <button @click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
    data(){
        return{
            account:"",
        }
    },
    methods:{
        closes(){
            this.$emit('close',"true");
        },
        login(){
            if(this.account=="admin"){
                //跳转到后台界面
                this.closes()
                this.$router.push("/rootView")
            }
        }
    }
}
</script>

<style lang="less" scoped>
    .popBoX{
        z-index: 9999999;
        width: 350px;
        height: 150px;
        position: fixed;
        background: rgb(206, 206, 206);
        // background: rgb(201, 68, 241);
        border-radius: 10px 10px 5px 5px;
        top: 50%;
        left: 50%;
        margin-left: -175px;
        margin-top: -75px;
        translate: 0.5s all;
        .header{
            width: 100%;
            height: 30px;
            background: rgb(23, 116, 255);
             border-radius: 10px 10px 5px 5px;
            position: relative;
            span{
                line-height: 30px;
                margin-left: 15px;
                color: rebeccapurple;
            }
            .close{
                width: 15px;
                height: 15px;
                border-radius: 50%;
                background: rgb(236, 26, 96);
                position: absolute;
                right: 10px;
                top: 10px;
            }
        }
        .content{
            width: 100%;
            height: 100px;
            padding: 10px;
            // background: red;

        }
    }
</style>